<template>
  <div class="app-container">
    <el-form label-width="140px"  :model="params" :rules="rules" ref="form">
        <div class="content-title">
            <el-button type="text" class="back-button" icon="el-icon-arrow-left" @click="closeTab">返回账号列表</el-button>
            <span class="content-titleText">账号类型管理</span>
        </div>
       <el-button type="success" @click="newObj">创建账号类型</el-button>
        <div class="content-card" v-for="(item,index) in getCardList" :key="index">
              <el-form label-width="120px"  :model="params" :rules="rules" ref="form" >
                  <el-form-item class="card-top" label="账号类型：" prop="arg1">
                    <el-input  v-model="item.name" :class="{inputDisable:item.disIpt}" :disabled="item.disIpt" clearable :placeholder="item.inputPlace"></el-input>
                </el-form-item>
                 <el-form-item label="账号类型权限：" prop="arg2">
                    <el-checkbox  v-model="item.choseAllList" :disabled = 'item.disIpt'>全选</el-checkbox>
                    <el-checkbox-group v-model="item.choseList">
                       <el-checkbox
                           :disabled = 'item.disIpt'
                           v-for="(itemCheck,index) in authorityList"
                           :label="itemCheck.id"
                           :key="index"
                           @change = "checkeDauthority(itemCheck,index)">{{itemCheck.name}}</el-checkbox>
                  </el-checkbox-group>
                </el-form-item>
              </el-form>
            <div slot="footer" class="dialog-footer" v-if="item.disIpt==true">
                <el-button type="success" @click="editObj(item,index)">编辑</el-button>
            </div>
            <div slot="footer" class="dialog-footer" v-else>
                <el-button @click="cancelObj('form',item,index)">取消</el-button>
                <el-button type="primary" @click="saveObj('form',item,index)">保存</el-button>
            </div>
        </div>
    </el-form>
  </div>
</template>

<script>
export default {
  data () {
    return {
      disIpt: true,
      params: {},
      rules: {
        //      arg1: { required: true, message: '请输入账号类型名称', trigger: 'blur' }
      },
      authorityList: [{
        name: '123',
        id: '1'
      },
      {
        name: '456',
        id: '2'
      }],
      getCardList: [{
        name: '管理员',
        choseList: ['1'],
        disIpt: true,
        inputPlace: '未填写'
      }],
      cardType: ''
    }
  },
  computed: {
  },
  methods: {
    newObj () {
      if (this.disIpt === false) {
        this.$message.error('请先保存当前新增操作')
      } else {
        this.disIpt = false
        this.cardType = '新增'
        var cardParams = {
          name: '',
          choseList: [],
          disIpt: false,
          inputPlace: '请输入账号类型名称'
        }
        this.getCardList.unshift(cardParams)
      }
    },
    editObj (item) {
      if (this.disIpt === false) {
        this.$message.error('请先保存当前编辑操作')
      } else {
        this.cardType = '编辑'
        this.disIpt = false
        item.disIpt = false
        item.inputPlace = '请输入账号类型名称'
      }
    },
    checkeDauthority () {

    },
    saveObj (formName, item) {
      var _this = this
      this.confirmBox({
        title: '确认修改权限',
        message: '确认修改 账号类型：' + '“' + item.name + '”' + '的名称与权限？',
        callback (action, instance) {
          // 方法内使用js写法
          if (action === 'confirm') {
            if (!item.name) {
              _this.$message.error('账号类型名称未填写')
              item.inputPlace = '未填写' // 记得修改
            } else {
              if (_this.cardType === '新增') {
                _this.messageBox({
                  message: '账号类型新增成功！'
                })
              } else if (_this.cardType === '编辑') {
                _this.messageBox({
                  message: '账号类型编辑成功！！'
                })
              }
              _this.disIpt = true
              item.disIpt = true
            }
          } else if (action === 'cancel') {
          }
        }
      })
    },
    cancelObj (formName, item, index) {
      //    this.$refs[formName].resetFields()
      this.disIpt = true
      if (this.cardType === '新增') {
        var _this = this
        this.confirmBox({
          title: '确认取消新增',
          message: '确认取消 新增账号类型：' + item.name + '吗？',
          callback (action, instance) {
          // 方法内使用js写法
            if (action === 'confirm') {
              _this.getCardList.splice(index, 1)
            } else if (action === 'cancel') {
            }
          }
        })
      } else if (this.cardType === '编辑') {
        item.disIpt = true
        item.inputPlace = '未填写'
      }
    }
  }
}
</script>

<style scoped lang="scss">

</style>
